<template>
  <div id="artical" v-loading="$store.state.loading">
    <div class="home-artical-header">
      <ul class="artical-category">
        <li class="artical-category--item" :class="{ active: $store.state.currentTypeId === 0 }" @click="$store.commit('setTypeId', 0)">全部</li>
        <li
          class="artical-category--item"
          v-for="(item, index) in $store.state.typeList"
          :key="item + index"
          :class="{ active: $store.state.currentTypeId === item.id }"
          @click="$store.commit('setTypeId', item.id)"
        >
          {{ item.type }}
        </li>
      </ul>
      <div class="artical-mini-pagenation" v-if="pagination">
        <el-pagination small layout="prev,pager, next" :total="pagination.total" :page-size="pagination.pageSize" @current-change="handleCurrentChange"> </el-pagination>
      </div>
    </div>

    <div v-if="!$store.state.loading">
      <div v-if="blogList && blogList.length">
        <ul class="artical-list">
          <li class="artical-content" v-for="item in blogList" :key="item">
            <ArticalItem :item="item"></ArticalItem>
          </li>
        </ul>
        <el-pagination background layout="prev, pager, next" :total="pagination.total" :page-size="pagination.pageSize" class="pagination" @current-change="handleCurrentChange"> </el-pagination>
      </div>

      <div v-else>
        <el-empty description="暂无博客..."></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import ArticalItem from '@/components/Artical/artical-item.vue'

export default {
  name: 'Home',
  components: {
    ArticalItem
  },
  data() {
    return {
      blogList: null,
      pagination: null
    }
  },
  created() {
    this.getBlog()
  },
  methods: {
    getBlog() {
      this.$store.commit('setLoading', true)
      this.$api
        .getBlog({
          page: this.pagination ? this.pagination.current : 1,
          type_id: this.$store.state.currentTypeId
        })
        .then((res) => {
          if (res.code === 1) {
            this.blogList = res.data.data
            this.pagination = {
              total: res.data.total,
              pageSize: res.pageSize,
              current: res.data.current_page
            }
          }
        })
        .then(() => {
          setTimeout(() => {
            this.$store.commit('setLoading', false)
          }, 300)
        })
    },

    handleCurrentChange(val) {
      this.pagination.current = val
      this.getBlog()
    }
  },

  computed: {
    typeId() {
      return this.$store.state.currentTypeId
    }
  },

  watch: {
    typeId() {
      this.getBlog()
    }
  }
}
</script>

<style lang="less" scoped>
#artical {
  .home-artical-header {
    height: 60px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    align-items: center;

    .artical-category {
      padding: 0 20px;
      font-size: 14px;
      line-height: 60px;

      .artical-category--item {
        display: inline-block;
        margin-right: 25px;
        cursor: pointer;
      }

      .artical-category--item.active {
        color: chocolate;
      }
    }
  }

  .artical-list {
    min-height: 500px;
  }

  .pagination {
    padding: 20px;
    text-align: right;
  }
}
</style>


